<template>
  <!--数据信息-->
  <div class="panel-container no-margin">
    <el-table
      ref="table"
      v-loading="dataListLoading"
      stripe
      :data="dataList"
      :header-cell-style="{ background: '#F5F5F5', color: '#000000' }"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        fixed="left"
        width="55"
      />
      <el-table-column
        align="center"
        header-align="center"
        label="编号"
        prop="khid"
      />
      <el-table-column
        align="center"
        header-align="center"
        label="公司名称"
        prop="ComName"
      >
        <template slot-scope="scope">
          <!-- 跳转到publish 带khid参数 -->
          <router-link
            :to="{ name: 'CluePublish', query: { khid: scope.row.khid } }"
          >
            <span class="text-link">
              {{ scope.row.ComName }}
            </span>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        label="客户"
        prop="LinkName"
      />
      <el-table-column
        align="center"
        header-align="center"
        label="添加时间"
        prop="created_time"
      />
      <el-table-column
        align="center"
        header-align="center"
        label="状态"
        prop="sts"
      >
        <template slot-scope="scope">
          <span>{{ getListName(ClueStsList, scope.row.sts) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="handleAssignClick([scope.row])"
          >
            分配
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      small
      background
      :current-page="pageNumber"
      :page-size="pageSize"
      :page-sizes="[10, 20, 50, 100]"
      :total="pageTotal"
      layout="total, sizes, prev, pager, next, jumper"
      style="margin-top: 20px; text-align: right"
      @current-change="currentChangeHandle"
      @size-change="sizeChangeHandle"
    />
  </div>
</template>

<script>
import { apiCustomeSearchList } from '@/api/clue'
import { getListName } from '@/utils'
import { ClueStsList } from '@/utils/constant'

export default {
  name: 'Panel1',
  components: {},
  props: {
    searchParams: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      ClueStsList,
      dataList: [],
      pageNumber: 1,
      pageSize: 10,
      pageTotal: 0,
      dataListLoading: false,
      searchFormArr: [
        {
          fieldName: '公司名称:',
          type: 'input',
          field: 'ComName',
          placeholder: '请输入公司名称'
        },
        {
          fieldName: '联系电话:',
          type: 'input',
          field: 'LinkPhone',
          placeholder: '请输入联系电话'
        }
      ],
      currentUserId: localStorage.getItem('feijiu_user_uid') || '',
      followManId: '',
      currentItem: null
    }
  },
  activated() {
    this.$refs.table.doLayout()
  },
  mounted() {
    this.init()
  },
  destroyed() {},
  methods: {
    init() {
      this.getDataList()
    },
    // 获取数据列表
    getDataList(type) {
      if (type === 'init') {
        this.pageNumber = 1
      }
      this.dataListLoading = true
      let info = {
        pageNumber: this.pageNumber,
        pageSize: this.pageSize,
        sts: 0
      }
      info = Object.assign(info, this.searchParams)
      apiCustomeSearchList(info)
        .then((res) => {
          const { data, total } = res
          this.dataList = data
          this.pageTotal = total
          this.dataListLoading = false
          this.$refs.table.doLayout()
        })
        .catch((e) => {
          this.dataList = []
          this.pageTotal = 0
          this.dataListLoading = false
        })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageNumber = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageNumber = val
      this.getDataList()
    },
    // 表格多选
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 获取列表名称
    getListName(list, id) {
      return getListName(list, id)
    },
    handleAssignClick(selectedRows) {
      this.$emit('assign-click', selectedRows)
    }
  }
}
</script>
<style lang="scss" scoped></style>
